<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <title>SL商城-联系客服</title>
		<meta charset='utf-8'>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
		<!-- 引入 Bootstrap -->
			<link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
			<link href="${pageContext.request.contextPath }/css/foundation-datepicker.min.css" rel="stylesheet" type="text/css">
		<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
		<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
		<![endif]-->
		<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
		<script src="${pageContext.request.contextPath }/js/jquery.js"></script>
		<!-- 包括所有已编译的插件 -->
		<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
		<script src="${pageContext.request.contextPath }/js/foundation-datepicker.min.js"></script>
		<script src="${pageContext.request.contextPath }/js/locales/foundation-datepicker.zh-CN.js"></script>
    </head>
	
	<style>
		#cart{
			width:670px;
			margin:50px 50px 50px;
		}
		
	</style>
	
	<body>
		<form class="form" action="#" >
			<div id="cart">
				<h4><span class="glyphicon glyphicon-shopping-cart"/>电子银行 &gt; 联系客服</h4>
				<hr/>
				
				<table class="table table-bordered" id='help'>
					<thead>
						<tr>
							<th> 单号  </th>
							<th>汇款金额</th>
							<th>日期</th>
							<th>时间</th>
							<th>汇款类型</th>
							<th>操作</th>
						</tr>
					</thead>
						
					<tbody class="text-center">
						<tr>
							<td> <input class="form-control" type="text" name="id[0]" value="" required></td>
							<td> <input class="form-control" type="text" name="money[0]" value="" required> </td>
							<td><input class="form-control" type="text" name="date[0]" value="" required> </td>
							<td><input class="form-control" type="text" name="time[0]" value="" required> </td>
							<td width="30%">
								<label class="radio-inline" ><input class="radio" type='radio' name='type[0]' value='1'/> 银联卡   </label>
								<label class="radio-inline" ><input class="radio" type='radio' name='type[0]' value='2'/> 信用卡   </label>
							</td>
							<td class="cz">
								<a href="javascript:;" onclick="addTR(this)"><span class="glyphicon glyphicon-plus" /></a>
							</td>
						</tr>
					</tbody>
				</table>
				<div class="pull-right">
					<button class="btn btn-primary" > 通知客服 </button>
				</div>
				
			</div>
		</form>
    </body>
	
	<script>
		//添加一行
		function addTR(self){
			
			$(self).parent().html('<a href="javascript:;" onclick="delTR(this)"><span class="glyphicon glyphicon-trash" /></a>');
			var trnode=$("#help").find("tr:eq(1)").clone();
			trnode.find('.cz').html('<a href="javascript:;" onclick="addTR(this)"><span class="glyphicon glyphicon-plus" /></a>');
			$("#help").find('tbody').append(trnode);
			emptyInput(trnode)
			changeName()
		}
		
		function emptyInput(trnode){
			$(trnode).find("td input").each(function(){
				$(this).val('')
			} );
		}
		
		//遍历每行,检查name属性的数组下标是否合理(对应该行)
		function changeName(){
			$("#help").find("tbody tr").each(function(i,e){
				$(this).find("td input").each(function(tdindex,e){
					var name=$(this).attr('name');
					var sufix=name.substring(0,name.indexOf('[')+1)
					var newname=sufix+i+']';
					//alert(newname)
					$(this).attr('name',newname);
				} );
			});
		}
		
		//删除一行
		function delTR(self){
			var tr=$(self).parent().parent();
			tr.remove();
			changeName()
		}
		
	</script>
</html>